<template>
  <div>
    <el-select v-model="value" placeholder="查询方式" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled || false"
      />
    </el-select>

    <el-card v-if="value === 'all'" header="查询所有">
      <el-form-item label="卡号">
        <el-input v-model="account.accountname" placeholder="请输入要查询的卡号" class="input-field"></el-input>
      </el-form-item>
	  <el-button type="primary" @click="checkbyAll()">确定</el-button>
	  
		  <el-card  v-if="transinfos" v-for="transinfo in transinfos"   class="transinfo-card">
		  		 <div slot="header" class="clearfix">
		  		   <span>账单</span>
		  		 </div>
		  		 <div>
		  			 <p>卡号：{{transinfo.accountname}}</p>
		  			 <p>金额：{{transinfo.money}}</p>
		  			<p>操作类型：
		  			    <template v-if="transinfo">
		  			      <template v-if="transinfo.transtypeid === 0">
		  			        存款
		  			      </template>
		  			      <template v-else-if="transinfo.transtypeid === 1">
		  			        取款
		  			      </template>
		  			      <template v-else-if="transinfo.transtypeid === 2">
		  			        转账
		  			      </template>
		  			    </template>
		  			  </p>
					 <p>操作时间：{{transinfo.transdate}}</p>
		  		 </div>
		  </el-card>
    </el-card>

    <el-card v-if="value === 'by-time'" header="按时间查询">
      
      <el-form-item label="卡号">
        <el-input v-model="sendtime.account.accountname" placeholder="请输入要查询的卡号" class="input-field"></el-input>
		<el-input v-model="sendtime.transDate" placeholder="请输入查询日期,如2024/07/01" class="input-field"></el-input>
      </el-form-item>
      <el-button type="primary" @click="checkbytime()">确定</el-button>
      
      		  <el-card  v-if="transinfos" v-for="transinfo in transinfos"   class="transinfo-card">
      		  		 <div slot="header" class="clearfix">
      		  		   <span>账单</span>
      		  		 </div>
      		  		 <div>
      		  			 <p>卡号：{{transinfo.accountname}}</p>
      		  			 <p>金额：{{transinfo.money}}</p>
      		  			<p>操作类型：
      		  			    <template v-if="transinfo">
      		  			      <template v-if="transinfo.transtypeid === 0">
      		  			        存款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 1">
      		  			        取款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 2">
      		  			        转账
      		  			      </template>
      		  			    </template>
      		  			  </p>
      					 <p>操作时间：{{transinfo.transdate}}</p>
      		  		 </div>
      		  </el-card>
    </el-card>

    <el-card v-if="value === 'by-amount'" header="按金额查询">
      
      <el-form-item label="卡号">
        <el-input v-model="sendmoney.account.accountname" placeholder="请输入要查询的卡号" class="input-field"></el-input>
      		<el-input v-model="sendmoney.money1" placeholder="请输入查询金额" class="input-field"></el-input>-<el-input v-model="sendmoney.money2" placeholder="请输入查询金额" class="input-field"></el-input>
      </el-form-item>
      <el-button type="primary" @click="checkbymoney()">确定</el-button>
      
      		  <el-card  v-if="transinfos" v-for="transinfo in transinfos"   class="transinfo-card">
      		  		 <div slot="header" class="clearfix">
      		  		   <span>账单</span>
      		  		 </div>
      		  		 <div>
      		  			 <p>卡号：{{transinfo.accountname}}</p>
      		  			 <p>金额：{{transinfo.money}}</p>
      		  			<p>操作类型：
      		  			    <template v-if="transinfo">
      		  			      <template v-if="transinfo.transtypeid === 0">
      		  			        存款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 1">
      		  			        取款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 2">
      		  			        转账
      		  			      </template>
      		  			    </template>
      		  			  </p>
      					 <p>操作时间：{{transinfo.transdate}}</p>
      		  		 </div>
      		  </el-card>
    </el-card>

    <el-card v-if="value === 'by-type'" header="按交易类型查询">
      <el-form-item label="卡号">
        <el-input v-model="sendtype.account.accountname" placeholder="请输入要查询的卡号" class="input-field"></el-input>
		<el-radio-group v-model="sendtype.transtypeId">
		    <el-radio :value="0">存款</el-radio>
		    <el-radio :value="1">取款</el-radio>
		    <el-radio :value="2">转账</el-radio>
		  </el-radio-group>
      </el-form-item>
      <el-button type="primary" @click="checkbytype()">确定</el-button>
      
      		  <el-card  v-if="transinfos" v-for="transinfo in transinfos"   class="transinfo-card">
      		  		 <div slot="header" class="clearfix">
      		  		   <span>账单</span>
      		  		 </div>
      		  		 <div>
      		  			 <p>卡号：{{transinfo.accountname}}</p>
      		  			 <p>金额：{{transinfo.money}}</p>
      		  			<p>操作类型：
      		  			    <template v-if="transinfo">
      		  			      <template v-if="transinfo.transtypeid === 0">
      		  			        存款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 1">
      		  			        取款
      		  			      </template>
      		  			      <template v-else-if="transinfo.transtypeid === 2">
      		  			        转账
      		  			      </template>
      		  			    </template>
      		  			  </p>
      					 <p>操作时间：{{transinfo.transdate}}</p>
      		  		 </div>
      		  </el-card>
      
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import {checkAll,checkTime,checkType,checkMoney} from '../utils/requestApi.js'

const value = ref('');
const options = [
  {
    value: 'all',
    label: '查询所有',
  },
  {
    value: 'by-time',
    label: '按时间查询',
  },
  {
    value: 'by-amount',
    label: '按金额查询',
  },

  {
    value: 'by-type',
    label: '按交易类型查询',
  },
];

const radio = ref(3)

const account = ref({
	accountname:'',
	id:'',
	password:'',
	balance:'',
	statusid:'',
	personid:''
})

const sendtime = ref({
	account:{
		accountname:'',
		id:'',
		password:'',
		balance:'',
		statusid:'',
		personid:''
	},
	transDate:''
})

const sendmoney = ref({
	account:{
		accountname:'',
		id:'',
		password:'',
		balance:'',
		statusid:'',
		personid:''
	},
	money1:'',
	money2:''
})

const sendtype = ref({
	account:{
		accountname:'',
		id:'',
		password:'',
		balance:'',
		statusid:'',
		personid:''
	},
	transtypeId:''
})


const transinfos = ref(null);//查询返回

const checkbyAll =  async () =>{
	checkAll(account.value).then(response =>{
		if (response.data.code === '200'){
			transinfos.value = response.data.data;
				  ElMessage({
					  message:'查询成功',
					  type:'success'
				  });
		
		}else{
				ElMessage({
				  message: response.data.msg,
				  type: 'danger'
				});  
		}
	})
	.catch(err =>{
		  ElMessage({
		    message: err,
		    type: 'danger'
		  });
	});
	}
	
	const checkbytime =  async () =>{
		checkTime(sendtime.value).then(response =>{
			if (response.data.code === '200'){
				transinfos.value = response.data.data;
					  ElMessage({
						  message:'查询成功',
						  type:'success'
					  });
			
			}else{
					ElMessage({
					  message: response.data.msg,
					  type: 'danger'
					});  
			}
		})
		.catch(err =>{
			  ElMessage({
			    message: err,
			    type: 'danger'
			  });
		});
		}
		
	const checkbymoney =  async () =>{
		checkMoney(sendmoney.value).then(response =>{
			if (response.data.code === '200'){
				transinfos.value = response.data.data;
					  ElMessage({
						  message:'查询成功',
						  type:'success'
					  });
			
			}else{
					ElMessage({
					  message: response.data.msg,
					  type: 'danger'
					});  
			}
		})
		.catch(err =>{
			  ElMessage({
			    message: err,
			    type: 'danger'
			  });
		});
		}
		
		
		
	const checkbytype =  async () =>{
		checkType(sendtype.value).then(response =>{
			if (response.data.code === '200'){
				transinfos.value = response.data.data;
					  ElMessage({
						  message:'查询成功',
						  type:'success'
					  });
			
			}else{
					ElMessage({
					  message: response.data.msg,
					  type: 'danger'
					});  
			}
		})
		.catch(err =>{
			  ElMessage({
			    message: err,
			    type: 'danger'
			  });
		});
		}
		
	


</script>
